<template>
    <div class="components_edit_modal">
        <el-dialog title="编辑教材" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <el-form :model="form"   :rules="rules" ref="form">
                <el-form-item label="教材名称："  prop="name">
                    <el-input v-model.trim="form.name" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="专业组：" prop="professionGroupId">
                    <el-select v-model="form.professionGroupId" placeholder="请选择">
                        <el-option
                            v-for="item in professionGroupList" :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性质：" prop="nature">
                    <el-radio-group v-model="form.nature">
                        <el-radio v-for="item in natureList" :key="item.value" :label="item.value" >{{item.name}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                 <el-form-item label="书号：" prop="bookNumber">
                    <el-input v-model.trim="form.bookNumber" auto-complete="off"></el-input>
                </el-form-item>
                
                <el-form-item label="出版社：" >
                     <el-input v-model.trim="form.publishingHouse" auto-complete="off"></el-input>
                </el-form-item>

               
                <el-form-item label="出版时间：" >
                     <el-date-picker
                        v-model="form.publishDate"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                 <el-form-item label="作者：" >
                    <el-input v-model.trim="form.author" auto-complete="off"></el-input>
                </el-form-item>
               
                <el-form-item label="备注：">
                    <el-input 
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        v-model.trim="form.remark" auto-complete="off">
                    </el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit" size="small">确 定</el-button>
                <el-button @click="state = false" size="small">关 闭</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    import {enums} from '@/constant'
    import { mapGetters } from 'vuex'
    export default {
        data() {
            return {
                 state: false,
                 courseBookId: null,
                 rules: {
                    name: [
                        { required: true, message: '请填写教材名称', trigger: 'blur' ,type: 'string'},
                        { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                    ],
                    professionGroupId: [
                         { required: true, message: '请选择专业组', trigger: 'change', type: 'number' }
                    ],
                    nature: [
                        { required: true, message: '请选择性质', trigger: 'change', type: 'string'},
                    ],
                    bookNumber: [
                       { required: true, message: '请填写书号', trigger: 'blur' ,type: 'string'},
                       { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                    ],
                 },
                form: {
                    id: null,
                    name:null,
                    nature:null,
                    professionGroupId:null,
                    author:null,
                    publishingHouse:null,
                    publishDate:null,
                    bookNumber:null,
                    remark:null,
                },
                // 教材性质列表
                natureList: null,
                //专业组列表
                professionGroupList: null,
            }
        },
        created() {
            // 获取教材性质列表
            this.getNatureList();
            // 获取专业组列表
            this.getProfessionGroupList();
        },
        mounted() {},
        computed:{
        },
        methods: {
            // 打开模态框方法
            showDialog(id){
                this.courseBookId = id;
                // 清空数据
                this.form.publishDate = null;
                this.form.publishingHouse =  null;
                this.form.author = null;
                this.form.remark = null;
                // 请求数据
                this.getCourseBookInfo();
                // 打开模态框状态
                this.state = true;
                this.$nextTick(function(){
                    this.$refs['form'].resetFields();
                })
            },
            getCourseBookInfo(){
                let vm = this;
                vm.axios.get(api.courseBook.queryById + vm.courseBookId).then((response) => {
                    if (response.data.success) {
                        for(let key in vm.form){
                            vm.form[key] = response.data.data[key];
                        }
                        // this.form = JSON.parse(JSON.stringify(response.data.data));
                        console.log(this.form)
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 获取教材性质列表
            getNatureList() {
                let vm = this;
                vm.axios.get(api.dictsTypesSubListUrl, {
                     params: {
                        type: "course_book_nature",
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.natureList = JSON.parse(JSON.stringify(response.data.data));
                        this.form.nature = this.natureList[0].value;
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 获取专业组数据列表
            getProfessionGroupList() {
                let vm = this;
                vm.axios.get(api.professionGroup.queryAllList).then((response) => {
                    if (response.data.success) {
                        this.professionGroupList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 保存
            submit() {
                let vm = this;
                vm.$refs['form'].validate((valid) => {
                    if (valid) {
                        console.log(this.form);
                        //return;
                        vm.axios.put(api.courseBook.update, vm.form)
                        .then((response) => {
                            if (response.data.success) {
                                vm.$message({
                                    type: 'success',
                                    message: response.data.msg,
                                });
                                // 关闭弹出窗口
                                vm.state = false;
                                // 刷新table
                                vm.$parent.$refs.courseBookTable.$emit('vuetable:refresh');
                            } else {
                                vm.$message.error(response.data.msg);
                            }
                        })
                    } else {
                        return false;
                    }
                });

            },
        },
        components: {}
    };
</script>
<style>
</style>